import React, { Component } from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import _ from 'loadsh'
import { Split, TitleLine, TextLine, TextCell } from '@components/ApprovePre/Approve'

export default class SecretaryHistory extends Component {
  state = {
    keyTitleMap: {}
  }

  // 格式化日期
  formatDate (date) {
    if (date) {
      return moment(date * 1000).format('YYYY-MM-DD HH:mm')
    }
  }

  initKeyTitleMap () {
    const map = {}
    const list = _.get(this.props.action || {}, 'vars', [])
    list.forEach(li => {
      map[li.key] = li.title
    })
    this.setState({
      keyTitleMap: map
    })
  }

  getFeeAfterDerate () {
    const { action } = this.props
    const { varsMap } = action
    const claim = this.props.caseDetail.claim || {}
    const acceptance = (varsMap.fee_acceptance_derate || {}).value || 0
    const processing = (varsMap.fee_processing_derate || {}).value || 0
    const fee = (claim.fee_acceptance_derate !== null || claim.fee_processing_derate !== null) ? claim.fee : claim.fee - acceptance - processing
    return `${fee}元`
  }

  getAcceptanceAfterDerate () {
    const { action } = this.props
    const { varsMap } = action
    const claim = this.props.caseDetail.claim || {}
    const acceptance = (varsMap.fee_acceptance_derate || {}).value || 0
    const fee = claim.fee_acceptance_derate !== null ? claim.fee_acceptance : claim.fee_acceptance - acceptance
    return `${fee}元`
  }

  getProcessingAgterDerate () {
    const { action } = this.props
    const { varsMap } = action
    const claim = this.props.caseDetail.claim || {}
    const processing = (varsMap.fee_processing_derate || {}).value || 0
    const fee = claim.fee_processing_derate ? claim.fee_processing : claim.fee_processing - processing
    return `${fee}元`
  }

  componentDidUpdate (prev) {
    if (this.props.instance !== prev.instance) {
      this.initKeyTitleMap()
    }
  }

  componentDidMount () {
    this.initKeyTitleMap()
  }

  render () {
    const { action } = this.props
    const { varsMap } = action
    const { keyTitleMap } = this.state
    return (
      <div>
        <TitleLine title={this.props.action.step_name} operator={action.operator} time={this.formatDate(action.complete_datetime)} />
        <TextLine>
          <TextCell>{keyTitleMap.fee_acceptance_derate}：{(varsMap.fee_acceptance_derate || {}).value || '0'}元</TextCell>
          <Split />
          <TextCell>{keyTitleMap.fee_processing_derate}：{(varsMap.fee_processing_derate || {}).value || '0'}元</TextCell>
        </TextLine>
        <TextLine>
          <TextCell>减免后受理费：{this.getAcceptanceAfterDerate()}</TextCell>
          <Split />
          <TextCell>减免后处理费：{this.getProcessingAgterDerate()}</TextCell>
          <Split />
          <TextCell>减免后仲裁费：{this.getFeeAfterDerate()}</TextCell>
        </TextLine>
        <TextLine>
          <TextCell style={{ width: '100%' }}>{keyTitleMap.jianmian_remark}：{(varsMap.jianmian_remark || {}).value || '无'}</TextCell>
        </TextLine>
        <TextLine>
          <TextCell style={{ width: '100%' }}>{action.remark_alias || '备注'}：{action.remark || '无'}</TextCell>
        </TextLine>
        {this.props.renderDoc()}
      </div>
    )
  }
}

SecretaryHistory.proptypes = {
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  action: PropTypes.object,
  caseDetail: PropTypes.object,
  renderDoc: PropTypes.func
}

SecretaryHistory.defaultProps = {
  userInfo: {},
  instance: {},
  action: {},
  caseDetail: {},
  renderDoc: () => { }
}
